<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红喇叭智慧便民</title>
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/animate.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script src="js/flexible.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/vue.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="app">
        <div class="yxtips">
            <p>满10元减2元，满20元减5元！</p>
            <p>活动时间：12月3号—12月6号</p>
        </div>
        <div class="logo abs-leftcenter">
            <img src="images/logo_160.png">
        </div>
        <div class="open abs-leftcenter">
            <div @click="ddSeen =! ddSeen" class="kaimen">开门
            </div>
        </div>
        <div class="ad abs-leftcenter">
            买新产品，上红喇叭
        </div>
        <div class="popupbox" v-if="ddSeen">
            <div class="wrap abs-center">
             <div class="bouncing-loader abs-center">
                <div></div>
                <div></div>
                <div></div>
              </div>
              <div class="message abs-center">{{content}}</div>
            </div>
              <div class="shadow"  @click="ddSeen =! ddSeen"></div>
        </div>
       
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            ddSeen: false,
            content: '正在开锁...', // 结果
            totalTime: 3 //倒计时
        },
        created() {
            this.countDown();
        },
        methods: {
            countDown() {
                let clock = window.setInterval(() => {
                    this.totalTime--
                    if (this.totalTime <= 0) {
                        clearInterval(clock)
                        this.content = '恭喜，开锁成功'
                        //this.ddSeen = false;
                    }
                }, 1000)
            }
        }
    });
</script>
</html>